<template>
	<div class="star" :class="'star-' + size">
		<span class="star-item" v-for="scs in starClasses" :class="scs"></span>
	</div>
</template>

<script>
	export default {
		props: {
			score: {
				type: Number
			},
			size: {
				type: Number
			}
		},
		computed: {
			// 等级换算图标
			starClasses() {
				const scs = []
				
				// 把等级转换为整数
				const scoreInteger = Math.floor(this.score)
				
				// 比如分数是3.7，转换为整数后是3，所以会加3个全星
				for(let i = 0; i<scoreInteger; i++) {
					scs.push('on')
				}
				
				// 判断等级减去等级的整数余数大于0.5会加一个半星
				if(this.score - scoreInteger >= 0.5) {
					scs.push('half')
				}
				
				// 如果scs这个数组长度没有达到5位，每少一位加一个空星
				for(let i = scs.length; i<5; i++) {
					scs.push('off')
				}
				
				return scs
			}
		}
	}
</script>

<style lang="less" scoped>
	.star{
		display: inline-block;
		margin-right: 8px;
		vertical-align: sub;
		&.star-24{
			.star-item{
				display: inline-block;
				width: 15px;
				height: 15px;
				background-size: contain !important;
				&.on{
					background: url(../../assets/images/stars/star24_on@2x.png);
				}
				&.half{
					background: url(../../assets/images/stars/star24_half@2x.png);
				}
				&.off{
					background: url(../../assets/images/stars/star24_off@2x.png);
				}
			}
		}
		
		&.star-36{
			.star-item{
				display: inline-block;
				width: 20px;
				height: 20px;
				background-size: contain !important;
				&.on{
					background: url(../../assets/images/stars/star36_on@2x.png);
				}
				&.half{
					background: url(../../assets/images/stars/star36_half@2x.png);
				}
				&.off{
					background: url(../../assets/images/stars/star36_off@2x.png);
				}
			}
		}
		
		&.star-48{
			.star-item{
				display: inline-block;
				width: 25px;
				height: 25px;
				background-size: contain !important;
				&.on{
					background: url(../../assets/images/stars/star48_on@2x.png);
				}
				&.half{
					background: url(../../assets/images/stars/star48_half@2x.png);
				}
				&.off{
					background: url(../../assets/images/stars/star48_off@2x.png);
				}
			}
		}
	}
</style>
